<template>
	<view class="zone">
		<Header title="我的背包" color="#fff"></Header>

		<view class="main">
			

			<view class="content">
				<!-- tab部分 -->
				<view class="tab">
					<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
						@click="tabchange(item.id)">{{item.name}}</view>
				</view>
				<view class="list">
					<view class="imgitem whitebg" :style="{height:height}" v-for="(item,index) in list[stat]" :key="index">
						<image :src=" imgurl + item.img" mode="widthFix" />
						<text>{{item.num}}</text>
					</view>
					<view class="imgitem" :style="{height:height}" v-for="(item , index) in shengyu" :key="index+100"></view>
				</view>

				<!-- <view class="list" v-show="stat == 2">
					<view class="imgitem" v-for="(item,index) in listdata[2]" :key="index" @click="showinfo(item)">
						<image :src=" imgurl + item.img" mode="widthFix" />
						<text>{{item.num}}</text>
					</view>
				</view> -->
				
				<!-- <view class="empty" v-if="listdata == ''">
					<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
					<text>数据为空</text>
				</view> -->

			</view>
		</view>

	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl:config.imgurl,
				stat:1,
				tablist: [
					{
						id: 1,
						name: '战力',
						isrequest:true,
					},
					{
						id: 2,
						name: '道具',
						isrequest:false,
					},
					{
						id: 3,
						name: '熊猫',
						isrequest:false,
					},
					{
						id: 4,
						name: '其他',
						isrequest:false,
					},
				],
				statmask:1,//弹窗切换
				show: false,//赠送好友
				equiplist: '',
				listdata:'',
				eqinfo:{},
				xzstat:'',//选中参数
				servicecharge:0,//手续费
				xzdata:'',//选中要赠送的武器装备
				numdata:'',//用户输入的数量
				invite_code:'',//用户邀请码
				rate_num:'',//赠送道具水晶手续费（个）
				noticelist:['道具赠送后无法撤回,骗子猖獗，一定谨慎在谨慎，请优先选择大玩家进行操作'],
				height:'',
				shengyu:45,
				list:{
					1:[],
					2:[],
					3:[],
					4:[],
				}
			};
		},
		onLoad() {
			this.getUserInfo()
			this.myEquip(1)
		},
		onReady() {
			 
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo(){
				let res = await this.$http.index.getUserInfo();
				this.rate_num = res.data.rate_num
			},
			// 我的背包切换
			tabchange(id) {
				this.stat = id
				if(!this.tablist[id -1 ].isrequest) {
					this.myEquip(id)
				}
			},

			// 弹窗切换
			tabchange2(id) {
				this.statmask = id
				this.xzstat = '';
				this.xzdata = ''
				if(!this.tablist[id-3].isrequest) {
					this.myEquip(id)
				}
			},
			// 获取我的背包
			async myEquip(type){
				let res = await this.$http.index.myEquip({
					type:type
				})
				this.list[type] = res.data
				if(res.code == 1) {
					this.tablist[type - 1].isrequest = true
				}
				this.$nextTick(()=>{
					uni.createSelectorQuery().select('.imgitem').boundingClientRect().exec((ret) => {
						this.height = ret[0].width + 'px'
					})
				})
				this.shengyu = 45 - this.listdata.length
			},

			// 显示装备信息
			showinfo(item){
				// console.log(item);
				this.eqinfo = item
				this.$refs.eq.show()
			},
			// 选中赠送好友
			xzchange(item,index){
				// console.log(item);
				this.xzstat = index
				this.xzdata = item
			},

			// 监听用户输入赠送数量
			inputchange(){	
				
				if (this.xzdata == '' || this.xzdata == null) {
					this.$u.toast('请先选择要赠送的道具')
					this.$nextTick(() => {
						this.numdata = ''
						this.servicecharge = 0
					});
				}else if(this.xzdata.num < this.numdata) {
					this.$u.toast('赠送数量不能大于所拥有的数量')
					this.$nextTick(() => {
						this.numdata = this.xzdata.num
					});
				}
				this.$nextTick(()=>{
					this.numdata = parseInt(this.numdata)
					if(this.numdata == '' || this.numdata == null || this.numdata == 0){
						this.servicecharge = 0
					}else {
						this.servicecharge = (this.numdata * this.rate_num).toFixed(2)
						if(isNaN(this.servicecharge)) {
							this.servicecharge = 0
						}
					}
				})
			},

			// 赠送好友
			async give(){
				if(this.xzdata == '' || this.xzdata == 'null') {
					this.$u.toast('请先选择要赠送的道具')
				}else if(this.invite_code == '' || this.invite_code == 'null') {
					this.$u.toast('请输入赠送好友的ID号')
				}else if(this.numdata == '' || this.numdata == 'null' || this.numdata == 0) {
					this.$u.toast('请准确输入道具数量')
				}else {
					let res = await this.$http.index.giveProps({
						type:this.statmask,
						equip_id:this.xzdata.equip_id,
						invite_code:this.invite_code,
						num:this.numdata
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.tablist[this.statmask].isrequest = false
						this.myEquip(this.statmask)
						this.show = false
					}
				}
			},

			// 取消赠送好友
			cancelgive(){
				this.show = false
				// 将数据置空
				this.xzstat = ''
				this.xzdata = ''
				this.numdata = ''
				this.invite_code = ''
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 53%, #28E2F5 62%, #8B66FC 100%);
	min-height: 100vh;
}
.main {
	padding: 10px;
}

.whitebg {
	background: #fff !important;
}


// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 9px;

		view {
			position: relative;
			width: 50%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: rgba(52, 52, 52, 0.6);
			font-size: 13px;
		}
	}

	.active {
		color: #000000 !important;
		position: absolute;


	}

	.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 32px;
		height: 4px;
		background: #000000;
		border-radius: 7px;
		backdrop-filter: blur(10px);
	}

.content {
	position: relative;
	padding: 15px 12px;
	height: calc(100vh - 100px);
	background: rgba(255,255,255,0.5);
	border-radius: 7px;
	margin-top: 10px;
}

.list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0;
		overflow: hidden;
		overflow-y: scroll;
		box-sizing: border-box;
		margin-top: 15px;
		height: calc(100vh - 185px);
		overflow: hidden;
		overflow-y: scroll;

		.imgitem {
			width: 18%;
			position: relative;
			margin: 0 1%;
			margin-top: 10px;
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.6);

			image {
				width: 100%;
			}

			text {
				position: absolute;
				bottom: 4px;
				right: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 12px;
				line-height: 24px;
				font-weight: bold;
				color: #343434;
			}
		}
	}

	.numbox {
		position: absolute;
		bottom: 20px;
		left: 10px;
		width: 32%;
		height: 29px;
		background: #867066;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;

		image {
			width: 19px;
		}

		text:nth-child(1) {
			color: #fff;
		}
	}

	.numtext {
		color: #6AFC11;
		margin: 0 5px;
	}

</style>
